<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>会员卡</title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>
<script>
var wxConfigSuccess = true;
  wx.config({
      debug: false,
      appId: '${appid}',
      timestamp: ${sign.timestamp},
      nonceStr: '${sign.noncestr}',
      signature: '${sign.signature}',
      jsApiList: [
        'checkJsApi',
        'chooseWXPay'
      ]
  });
  wx.ready(function () {
	  // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
	   wx.checkJsApi({
	      jsApiList: [
	        'chooseWXPay'
	      ],
	      success: function (res) {
	    	  if(res.checkResult.chooseWXPay==true && wxConfigSuccess){
	    		  $("#reBtn").prop("disabled",false);
		      }
	      },
	   });
	   $("#reBtn").on("click",function(){
			$("#recharge").removeClass("am-hide");
			$("#detail").addClass("am-hide");
	   });
	   $("#cancelBtn").on("click",function(){
		   	$("#detail").removeClass("am-hide");
			$("#recharge").addClass("am-hide");
	   });
	   var regAmount = /^((\d{0,8})|(\d{0,8}\.\d{0,1}))$/;
	   $("#subBtn").on("click",function(){
			var amount = $("#amount").val();
	        if (!amount) {
	            Comm.msg("请输入金额");
	            return;
	        }
	        if (amount && !regAmount.test(amount)) {
	        	Comm.msg("请输入正确的金额数字，例：10.5");
	            return;
	        }
	        var $btn = $(this);
	        $cancelBtn = $("#cancelBtn");
			$btn.attr("disabled","disabled").text("正在提交...");
			$cancelBtn.prop("disabled","disabled");

			$.ajax({
				type : 'POST',
	            url: "${ctx}/weixin/vip/unifiedorder",
	            dataType: "json",
	            data:"amount="+amount,
	            success: function (data) {
	            	if (data.success) {
	            		//$("#no").val(data.params.no);
	            		//微信支付
	 	         	   wx.chooseWXPay({
	 	         		      timestamp: data.params.payInfo.timeStamp,
	 	         		      nonceStr: data.params.payInfo.nonceStr,
	 	         		      package: data.params.payInfo.package,
	 	         		      signType: data.params.payInfo.signType,
	 	         		      paySign: data.params.payInfo.sign,
	 	         		      success: function (res) {
	 	         		          // 支付成功后的回调函数
	 	         		    	paySuccess(data.params.no);
	 	         		      },
	 	         		      fail:function (res) {
	 	         		          // 支付失败后的回调函数
	 	         		    	  Comm.msg(res.errMsg);
	 	         		      },
	 	         		      complete:function () {
	 	         		    	$btn.prop("disabled",false).text("确认充值");
	 	         		    	$cancelBtn.prop("disabled",false);
	 	         		    	$("#detail").removeClass("am-hide");
	 	         				$("#recharge").addClass("am-hide");
	 	         		      }
	 	         		});
	            	}else{
	            		Comm.msg(data.msg);
	            		$btn.prop("disabled",false).text("确认充值");
	            		$cancelBtn.prop("disabled",false);
	            	}
	            },
	            error: function () {
	            	Comm.msg("充值失败，请稍候重试");
	            	$btn.prop("disabled",false).text("确认充值");
	            	$cancelBtn.prop("disabled",false);
	            }
	        });
		});
	   
	   var paySuccess = function(no){
			  $btn = $("#subBtn");
			  $cancelBtn = $("#cancelBtn");
			  $.ajax({
				type : 'POST',
		          url: "${ctx}/weixin/vip/payQuery",
		          dataType: "json",
		          data:"no="+no,
		          success: function (data) {
		        	  Comm.msg(data.msg);
		        	  $btn.prop("disabled",false).text("确认充值");
		        	  $cancelBtn.prop("disabled",false);
		          	if (data.success) {
		          		$("#vip-balance").text("余额："+data.params.balance+"元");
		          	}
		          },
		          error: function () {
		          	Comm.msg("充值失败，请稍候重试");
		          	$btn.prop("disabled",false).text("确认充值");
		          	$cancelBtn.prop("disabled",false);
		          }
		      });
		  };
		  
		  $("#doc-modal").on("opened.modal.amui", function() {
				$("#doc-modal").css({
					"bottom" : "0",
					"margin-top" : "0"
				});
		});
  });
  
  wx.error(function (res) {
	  wxConfigSuccess = false;
	});
</script>
</head>
<body>
<c:if test="${not empty resultMsg}">
    <script type="text/javascript">
    	Comm.msg("${resultMsg.msg}");
	</script>
</c:if>
	<img src="assets/img/vip_card.png" style="width: 100%">
	<div class="am-panel am-panel-vip am-margin-sm" id="detail">
		<div class="am-panel-hd am-text-bold">会员卡号：${vip.vipNo}</div>
		<div class="am-panel-bd am-padding-0">
			<span class="am-block am-padding-sm">积分：${vip.points}</span>
			<hr class="am-margin-0">
			<span class="am-block am-cf"><span id="vip-balance"
				class="am-fl am-padding-sm">余额：${vip.balance}元</span><span
				class="am-fr am-padding-xs">
					<button id="reBtn"
						class="am-btn am-btn-sm am-btn-vip am-radius am-padding-horizontal-lg"
						type="button" disabled="disabled">充值</button>
			</span></span>
			<hr class="am-margin-0">
			<span class="am-block am-padding-sm am-cf"><span class="am-fl">下次美发时间提醒</span><span
				class="am-fr"><fmt:formatDate value="${hairdoRecord.suggestNextHaircutDate}" pattern="M月d日"/></span></span>
			<hr class="am-margin-0">
			<span class="am-block am-padding-sm am-cf"><span class="am-fl">下次美发项目提醒</span><span
				class="am-fr">${hairdoRecord.suggestNextItem}</span></span>
		</div>
	</div>
	<div class="am-panel am-panel-vip am-margin-sm am-hide" id="recharge">
		<div class="am-panel-hd am-text-bold">会员卡号：${vip.vipNo} 余额充值</div>
		<div class="am-modal-bd am-text-left am-padding-horizontal-0">
			<form id="form">
				<input type="hidden" name="no" id="no">
				<div class="am-g">
					<div class="am-u-sm-12">
						金额：<input type="number" id="amount" name="amount"
							placeholder="请输入充值金额">
						<p class="am-form-help">单位：元</p>
					</div>
				</div>
				<div class="am-g am-margin-top-xs">
					<div class="am-u-sm-6 am-text-center">
						<button id="subBtn"
							class="am-btn am-btn-sm am-btn-vip am-radius am-padding-horizontal-lg"
							type="button">确认充值</button>
					</div>
					<div class="am-u-sm-6 am-text-center">
						<button id="cancelBtn"
							class="am-btn am-btn-sm am-btn-vip am-radius am-padding-horizontal-lg"
							type="button">取消</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>
